<style lang="less" scoped>
	.aboutUs {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 20;
		transition: all 0.5s;
	}
	.aboutUs-close{
		left: -100%;
		transition: all 0.5s;		
	}
	.aboutUsContent {
		position: relative;
		width: 74.7%;
		height: 100%;
		background-color: #fff;
		.banner{
			width: 100%;
			height: 4.13rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.list{
			padding: 0.88rem 0 0 1.68rem;
			li{
				margin-bottom: 0.55rem;
				img{
					margin-top: 0.03rem;
					width: 0.59rem;
					height: 0.59rem;
				}
				p{
					float: right;
					width: 4.91rem;
					line-height: 0.59rem;
					font-size: 0.42rem;
					text-indent: 0.35rem;
					color: #242425;
					padding-bottom: 0.19rem;
					border-bottom: 0.02rem solid #E1E1E1;
				}
			}
		}
		.p{
			position: absolute;
			left: 0;
			bottom: 0.61rem;
			width: 100%;
			text-align: center;
			font-size: 0.35rem;
			color: #4A4A4A;
			span{
				color: #9B9B9B;
			}
		}
	}
	
	.aboutUsClose {
		position: absolute;
		top: 0.37rem;
		left: 74.7%;
		width: 1.39rem;
		height: 1.12rem;
		z-index: 10;
		img{
			width:100%;
			height:100%
		}
	}

</style>
<template>
	<div :class="close">
		<!--关于我们内容-->
		<div class="aboutUsContent">
			<!-- banner -->
			<div class="banner"><img src="../images/phone-left-banner.png" alt=""></div>
			<ul class="list">
				<li @click.stop="aboutCemetery"><img src="../images/phone-left-icon1.png" alt=""><p>关于陵园</p></li>
				<li @click.stop="biographyList"><img src="../images/phone-left-icon2.png" alt=""><p>人物传记</p></li>
				<li @click.stop="mobliefeedback"><img src="../images/phone-left-icon3.png" alt=""><p>客户服务</p></li>
				<li @click.stop="cemeteryVisit"><img src="../images/phone-left-icon4.png" alt=""><p>陵园参观</p></li>
				<li @click.stop="cemeteryMap"><img src="../images/phone-left-icon5.png" alt=""><p>陵园导航</p></li>
				<li @click.stop="technicalSupport"><img src="../images/phone-left-icon6.png" alt=""><p>技术支持</p></li>
			</ul>
			<p class="p">
				万豪实业&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;星星网
			</p>
		</div>
		<!--关闭-->
		<div class="aboutUsClose" @click="closeAbuoutUs"><img src="../images/mobileClose.png"/></div>
	</div>
</template>
<script>
    export default {
		data() {
			return {
			}
		},
        // props: {
		// 	qrCode:"qrCode",
        //     title: {
        //         type: String,
        //         default: 'className'
        //     },
		// 	close:""
        // },
		props:["class","qrCode","cemeteryId"],
		methods:{
			biographyList(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/biographyList',query:{"qrCode":this.qrCode}});
			},
			mobliefeedback(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/mobliefeedback',query:{"lyid":this.cemeteryId}});
			},
			aboutCemetery(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/aboutCemetery',query:{"qrCode":this.qrCode,"cemeteryId":this.cemeteryId}});
			},
			cemeteryVisit(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/cemeteryvisit',query:{"qrCode":this.qrCode}});
			},
			cemeteryMap(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/map',query:{"cemeteryId":this.cemeteryId}});
			},
			technicalSupport(){
				localStorage.setItem('isBack',10);
				this.$router.push({ path: '/technicalSupport'});
			},
			// 关闭关于我们
			closeAbuoutUs:function(){
				this.$emit("tell-me-classname","aboutUs aboutUs-close");
			}
		}
    }
</script>